<template>
    <div style="height: 100vh;text-align: center">
        <img class="fly" :src="flyImg">

        <div class="panel_motto">
            <div class="content_motto">
                {{mottoes.motto}}
            </div>
<!--            <div class="motto_writer">{{mottoes.name}}- {{mottoes.author}}</div>-->
        </div>
        <a @click="drop()">
            <svg t="1614229115954" class="icon icon1" viewBox="0 0 1024 1024" version="1.1"
                 xmlns="http://www.w3.org/2000/svg" p-id="11382" width="40" height="40">
                <path d="M467.231 780.553L19.669 332.991c-24.753-24.752-24.753-64.788 0-89.541 24.681-24.682 64.788-24.753 89.541 0l402.792 402.791L914.793 243.45c24.682-24.682 64.788-24.753 89.541 0 24.753 24.752 24.681 64.788 0 89.541L556.771 780.553c-24.751 24.681-64.787 24.681-89.54 0z"
                      p-id="11383" fill="#ffffff"></path>
            </svg>
        </a>

    </div>
</template>

<script>
    import '../assets/common/STXINGKA/font_STXINGKA.css';

    export default {
        name: "flyleaf",

        data() {
            return {
                mottoes: {
                    'motto': '娉娉袅袅十三余,豆蔻梢头二月初.',
                    'name': '《赠别》',
                    'author': '杜甫'
                },
                'flyImg': ''
            }
        },
        created() {
            this.getMotto();
            this.getFlyImg();
        },
        methods: {
            getMotto() {
                this.req({
                    url: 'motto',
                    method: 'POST'
                })
                    .then(res => {
                        this.mottoes = res.data;
                    })
                    .catch(error => {
                        console.log('getMotto() error' + error)
                    });
            },
            async getFlyImg() {
                this.req({
                    url: 'flyImage',
                    method: 'POST'
                })
                    .then(res => {
                        this.flyImg = res.data.img_url;
                    })
                    .catch(error => {
                        console.log('getFlyImg() error' + error);
                    });
            },

            drop() {
                $('html,body').animate({scrollTop: '0' + $(window).height()}, 1000);
            },
            randomNum(min, max) {
                return require('@/assets/img/' + Math.floor(Math.random() * (max - min) + min) + '.jpg');
            },
        }
    }
</script>

<style scoped>
    .fly {
        pointer-events: none;
        position: absolute;
        z-index: 0; /*层级放后，防止覆盖其他组件*/
        top: 0;
        left: 0;

        width: 100vw;
        height: 100vh;
        background: #1e1f23 no-repeat; /*背景图片不随内容滚动而滚动*/
        /*filter: blur(3px); !*背景虚化*!*/
        visibility: visible;
    }

    .icon1 {
        opacity: 0.1;
        cursor: pointer;
        position: absolute;
        top: 89vh;
        left: 48.5vw;
        animation: down 4s linear infinite;
    }

    @media screen and (max-width: 670px) {
        .icon1 {
            opacity: 0.1;
            position: absolute;
            bottom: 2vh;
            left: 45vw;
            animation: down 1s linear infinite;
            animation-direction: alternate;
        }
    }

    @keyframes down {
        0% {
            /*bottom: 3vh;*/
            opacity: 0.1;
        }
        50% {
            /*bottom: 2vh;*/
            opacity: 0.7;

        }
        100% {
            /*bottom: 1vh;*/
            opacity: 0.1;
        }


    }

    .panel_motto {
        /*background-color: gray;*/
        position: absolute;
        top: 57vh;
        text-align: center;
        width: 100%;
        left: 13px
    }

    .content_motto {
        font-family: STXINGKA;
        color: white;
        font-size: xx-large;

    }

    /*.motto_writer {*/
    /*    color: white;*/
    /*    font-size: medium;*/
    /*    margin-top: 4vh;*/
    /*}*/
</style>
